<!--
 * @Description: 
 * @Author: charles
 * @Date: 2021-05-05 22:02:56
 * @LastEditors: Hzl
 * @LastEditTime: 2021-09-22 20:14:38
-->
<template>
  <div ref="root" style="height:150px">
    
  </div>
</template>
<script>
import { Bar } from '@antv/g2plot';
export default {
  data(){
    return{

    }
  },
  mounted(){
    this.initCharts();
  },
  methods:{
    initCharts(){
      const data = [
        {
          country: '已完成',
          week: '第一周',
          value: 502,
        },
        {
          country: '已完成',
          week: '第二周',
          value: 635,
        },
        {
          country: '已完成',
          week: '第三周',
          value: 809,
        },
        {
          country: '已完成',
          week: '第四周',
          value: 947,
        },

        {
          country: '正在进行',
          week: '第一周',
          value: 106,
        },
        {
          country: '正在进行',
          week: '第二周',
          value: 107,
        },
        {
          country: '正在进行',
          week: '第三周',
          value: 111,
        },
        {
          country: '正在进行',
          week: '第四周',
          value: 133,
        },

        {
          country: '未完成',
          week: '第一周',
          value: 163,
        },
        {
          country: '未完成',
          week: '第二周',
          value: 203,
        },
        {
          country: '未完成',
          week: '第三周',
          value: 276,
        },
        {
          country: '未完成',
          week: '第四周',
          value: 408,
        },
      ];
      let bar = new Bar(this.$refs['root'],{
          data,
          xField: 'value',
          yField: 'week',
          seriesField: 'country',
          isPercent: true,
          isStack: true,
          /** 自定义颜色 */
          color: ['#CC3333', '#6699CC', '#66CC99'],
          label: {
            position: 'middle',
            content: (item) => {
              return item.value.toFixed(2);
            },
            style: {
              fill: '#fff',
            },
          },
      });
      //4
      bar.render();
    }
  }
}
</script>